import React, { Component } from "react";
import { Button, Form, Icon } from "semantic-ui-react";
import * as websocket from "@utils/vedio";
function IconItem(props) {
  return <Icon name={props.name} size="big" style={{ color: "#555" }} />;
}

function IconList(props) {
  const iconLayout = {
    display: "flex",
    alignItems: "center",
    padding: "5px"
  };
  const icons = props.icons;
  const iconItems = icons.map((name, index) => (
    <IconItem key={index.toString()} name={name} />
  ));
  return <div style={iconLayout}>{iconItems}</div>;
}
function SendButton(props) {
  const buttonLayout = {
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-end"
  };
  const call = () => {
    console.log("this is:", this);
    websocket.call("a");
  };
  return (
    <div style={buttonLayout}>
      <Button
        onClick={e => call(e)}
        content="发送"
        labelPosition="right"
        icon="edit"
      />
    </div>
  );
}
class ChatInputFormSet extends Component {
  render() {
    const icons = ["microphone", "smile outline"];
    return (
      <Form reply>
        <IconList icons={icons} />
        <Form.TextArea style={{ minHeight: 41, resize: "none" }} rows={5} />
        <SendButton />
      </Form>
    );
  }
}
export default ChatInputFormSet;
